import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon, Row, Col, DatePicker, Select, Message  } from 'antd';
import '../../../../assets/css/landlord/table.css'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const MonthPicker = DatePicker.MonthPicker;

let Demo = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },
  getInitialState() {
    return {
      loading: false,
      costList:[], // 收费项列表
      rentContractId:'',//合约id
      normalFeekeys: [], // 正常收费项列表key
      costNameContent:'', // 收费项内容
      keys:[], //存储添加项的key和type（模板渲染类型）

      typeIdArry:[],   // 收费项类型id数组
      typeNameArry:[], // 收费项类型名称关联数组
      costIdArry:[], // 收费项名称id数组
      costNameArry:[], //收费项名称关联数组
      curType:'1',  // 当前选中的类型为1
      periodCollectAmount: 0.00, // 当期应收金额
      periodReceivedAmount: 0.00, // 当期实收金额
      receivedAmountArry: [], // 实收金额输入框id,金额关联数组
      idArry:[], // 实收金额输入框id数组
      refundMoney: 0.00, // 实际退款总额
      collectRentAmount: 0.00, // 应收房租
      rentAmount: 0.00, // 已收房租
      collectCostAmount: 0.00, // 应收收费项总额
      receivedCostAmount: 0.00,// 实收收费项总额
      depositAmount: 0.00, // 押金余额总额
      endTime: '', // 收款结束日
      startTime: '', // 收款开始日
      roomNames: [], // 房间名称数组
    }
  },

  componentDidMount() {
    this.fetchCostList();
    this.getRecord();


  },
  // 计算实退总额
  calculateRefundMoney(rentAmount, collectRentAmount, depositAmount, receivedCostAmount ){
    let deposit = this.props.location.state.deposit;
    let refundMoney;
    refundMoney = (rentAmount + deposit - collectRentAmount + depositAmount - receivedCostAmount).toFixed(2);

    this.setState({
      refundMoney: refundMoney
    });

  },

  // 获取已收房租、收租开始时间、收租结束时间
  getRecord(){
    let params = {
      rentContractId: this.props.location.state.rentContractId
    }
    let _me = this;
    Utils.sendAjax({
      url: '/rent/cancel/getRecord',
      data: JSON.stringify(params),
      callback: function (result) {
        if (result.code == '200') {

          let rentAmount = result.data.rentAmount;
          let collectRentAmount = result.data.rentAmount;

          _me.setState({
            rentAmount:rentAmount,
            collectRentAmount: collectRentAmount,
            roomNames: result.data.roomNames,
            startTime: result.data.startTime,
            endTime: result.data.endTime,
          })
          // 计算实收总额
          _me.calculateRefundMoney(rentAmount, collectRentAmount, _me.state.depositAmount,  _me.state.receivedCostAmount )
        }else{
          Message.error(result.message, 10);
        }
      }
    })
  },

  // 计算押金余额
  calculateDepositAmount(data){
    let money = 0;
    if(data){
      data.forEach((item) => {
        money += item.depositBalance
      });
    }
    this.setState({
      depositAmount: money
    });
  },


  // 首次进入页面 计算应收总金额periodCollectAmount、实收收费项总金额receivedCostAmount
  calculateCollectAmount(data){
    let rent = this.state.collectRentAmount
    let money = 0 ;
    data.forEach((item) => {
      money += item.collectAmount
    });

    let periodCollectAmount = money + rent ;
    this.setState({
      receivedCostAmount:money,
      periodCollectAmount: periodCollectAmount,
      periodReceivedAmount: periodCollectAmount
    });

    return money;
  },
  // 实时获取实收金额输入框的值，并更新收集数组里的值
  getReceivedAmountArry(data){
    let obj = {};
    let arry = []
    data.forEach((item) => {
      obj[`${item.id}receivedAmount`] = item.collectAmount;
      arry.push(`${item.id}receivedAmount`);
    });
    let params = {
      receivedAmountArry:obj,
      idArry: arry
    }
    return params;
  },

  // 实时计算实收总金额periodReceivedAmount
  calculatingCollectAmount(data){
    let money = 0;
    let receivedAmountArry = this.state.receivedAmountArry;
    let idArry = this.state.idArry;
    if(!(data.name in receivedAmountArry)) {
      receivedAmountArry[data.name] = data.value;
      idArry.push(data.name);
    }

    receivedAmountArry[data.name] = data.value;
    idArry.forEach((item) => {
      money += parseFloat(receivedAmountArry[item]);
    });

    let rent = this.state.collectRentAmount;
    let periodReceivedAmount = money + rent ;
    this.setState({
      periodReceivedAmount:periodReceivedAmount,
      receivedCostAmount:money
    });

    // 计算实收总额
    this.calculateRefundMoney(this.state.rentAmount, this.state.collectRentAmount, this.state.depositAmount,  money )
  },
  // 绑定实收金额输入框
  handleGetValue(k, e){
    let value = e.target.value;
    let name = e.target.id;
    if(value == ''){
      value = 0
    }
    let params = {
      name: name,
      value: parseFloat(value)
    }

    this.calculatingCollectAmount(params);
  },

  // 获取收费项列表
  fetchCostList(){
    let _me = this;
    let id = this.props.location.state.rentContractId;
    let params = {rentContractId: id};
    Utils.sendAjax({
      url: '/rent/cost/list',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          let collectAmount = _me.calculateCollectAmount(result.data);
          let data = _me.getReceivedAmountArry(result.data);
          let receivedAmountArry = data.receivedAmountArry;
          let idArry = data.idArry;
          let costList = result.data;
          costList.forEach((item) => {
            item.status = '1'; // 设置默认操作为收取 ，即status = '1'
          });

          _me.getNormalFee(result.data);
          _me.setState({
            costList: costList,
            //periodCollectAmount: collectAmount,
            //periodReceivedAmount: collectAmount,
            collectCostAmount: collectAmount,
            receivedAmountArry: receivedAmountArry,
            idArry: idArry
          })
        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },
  // 获取其他收费项  收费项类别列表
  fetchCostTypeList(){
    let _me = this;
    Utils.sendAjax({
      url: '/rent/costType/list',
      callback: function(result) {
        if (result.code == '200') {

          _me.getTypeList(result.data);
          _me.getCostList(result.data);
        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },

  // 获取 costIdArry、costNameArry
  getCostList(data){
    let costIdArry = [];
    let costNameArry = [];
    data.forEach((item) => {
      let idArry = [];
      item.feeList.forEach((item1) => {
        idArry.push(item1.feeId);
        costNameArry[item1.feeId] = item1.feeName;
      });
      costIdArry[item.typeId] = idArry;

    });
    this.setState({
      costIdArry: costIdArry,
      costNameArry: costNameArry
    });
  },



  // 获取typeIdArry、typeNameArry
  getTypeList(data){
    let typeIdArry = [];
    let typeNameArry = [];
    data.forEach((item) => {
      typeIdArry.push(item.typeId);
      typeNameArry[item.typeId] = item.typeName;
    });

    this.setState({
      typeIdArry: typeIdArry,
      typeNameArry: typeNameArry
    });
  },


// 获取正常收费项的key
  getNormalFee(data){
    let normalFeekeys = this.state.normalFeekeys;
    data.forEach((item) =>{
      normalFeekeys.push(item.id)
    });
    this.setState({
      normalFeekeys:normalFeekeys
    })
  },
  // 添加其他收费项
  key: 0,
  handleAddOtherFee(){
    this.fetchCostTypeList();
    const { form } = this.props;

    let keys = form.getFieldValue('keys');
    let costIdArry = this.state.costIdArry;
    keys = keys.concat({key:this.key++,type:'1',options:costIdArry[1]});

    form.setFieldsValue({
      keys
    });
    this.setState({
      keys:keys
    });
  },

  // 删除其他收费项
  handleRemoveOtherFee(k){
    const { form } = this.props;

    let keys = form.getFieldValue('keys');
    keys = keys.filter((key) => {
      return key.key !== k;
    });
    form.setFieldsValue({
      keys,
    });
    this.setState({
      keys:keys
    });
  },
  getContractExpenseList(data){
    let formData = [];
    data.keys.forEach(item => {
      let obj = {};
      obj.chargeName = data[item.key + "chargeName"];
      obj.chargeType = data[item.key + "chargeType"];
      obj.expenseAmount = data[item.key + "expenseAmount"]
      obj.otherItem = data[item.key + "otherItem"]
      formData.push(obj)
    });
    return formData;
  },
  getRentCostList(data){
    let formData = [];
    data.normalFeekeys.forEach(item => {
      let obj = {};
      obj.collectAmount = data[item + "collectAmount"];
      obj.contractFeeItemId = data[item + "contractFeeItemId"];
      obj.costName = data[item + "costName"];
      obj.costType = data[item + "costType"];
      obj.currScale = data[item + "currScale"];
      obj.depositBalance = data[item + "depositBalance"];
      obj.lastScale = data[item + "lastScale"];
      obj.receivedAmount = data[item + "receivedAmount"];
      obj.status = data[item + "status"];
      formData.push(obj)
    });
    return formData;
  },

  // 收费项类型切换 k：行号，type：收费项类型
  handleCostTypeChange(k,type){
    console.log(k,type);
    let keys = this.state.keys;
    let costIdArry = this.state.costIdArry;

    let { form } = this.props;
    let obj = {};
    obj[`${k}chargeName`] = ''
    form.setFieldsValue(obj);

    keys.forEach((item)=>{
      if(item.key == k){
        item.type = type;
        item.options = costIdArry[type];
      }
    });

    this.setState({
      keys: keys,
      curType: type
    });

  },
  handleCostNameChange(k, name){
    console.log(k,name);
  },

  // 点击操作 收取、免费改变costList里值
  handleSetStatus(k, e){
    let form = this.props.form;
    let costList = this.state.costList;
    let value = e.target.value;
    let receivedAmount = 0; // 实收金额

    costList.forEach((item) => {

      if(item.id == k){
        item.status = value;

        receivedAmount = (item.status =='1' ? parseFloat(item.collectAmount): '0');
        let obj = {};
        obj[`${k}receivedAmount`] = parseFloat(item.collectAmount);
        form.resetFields([`${k}receivedAmount`]);
        console.log('receivedAmount',receivedAmount);
      }
    });

    this.setState({
      costList: costList
    });

    // 当为免收时，实收金额为0，重新计算实收总金额
    let params = {
      name: `${k}receivedAmount`,
      value: parseFloat(receivedAmount)
    }
    this.calculatingCollectAmount(params);


  },


  // 收取方式选择 押金代扣  select选择
  handleCostType(k, e){
    let form = this.props.form;
    let costList = this.state.costList;
    let value = e;
    let receivedAmount;
    costList.forEach((item) => {
      if(item.id == k){
        item.costType = value;
        receivedAmount = (item.costType !='3' ? parseFloat(item.collectAmount): '0');
        let obj = {};
        obj[`${k}receivedAmount`] = parseFloat(item.collectAmount);
        form.resetFields([`${k}receivedAmount`]);

      }
    });
    this.setState({
      costList: costList
    });

    // 当为免收时，实收金额为0，重新计算实收总金额

    console.log('receivedAmount',receivedAmount);
    let params = {
      name: `${k}receivedAmount`,
      value: parseFloat(receivedAmount)
    }
    this.calculatingCollectAmount(params);
  },

  // 改变退租日，获取应收房租
  getRentAmountRecei(value){
    let _me = this;
    let params = {
      rentCancelDay: value,
      rentContractId: this.props.location.state.rentContractId
    }
    Utils.sendAjax({
      url: '/rent/cancel/getRentAmount',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          // 当期实收总额
          let periodReceivedAmount = _me.state.receivedCostAmount + result.data

          // 当期应收金额= 应收房租+应收收费项
          console.log('_me.state.collectCostAmount',_me.state.collectCostAmount);
          let periodCollectAmount  = _me.state.collectCostAmount + result.data

          _me.setState({
            collectRentAmount: result.data,
            periodCollectAmount: periodCollectAmount
          });


          _me.setState({
            periodReceivedAmount: periodReceivedAmount
          });

          console.log('result.data',result.data);
          // 计算实收总额
          _me.calculateRefundMoney(_me.state.rentAmount, result.data, _me.state.depositAmount,  _me.state.receivedCostAmount )

        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },

  // 退租表单提交
  rentRoomsCheckOuntOrder(params){
    let _me = this;
    _me.setState({
      loading: true
    });
    Utils.sendAjax({
      url: '/rent/contract/cancel',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          let goPathUrl = '/landlord/rentManage/checkOutList'
          _me.context.router.push({pathname: goPathUrl, state: {rentContractId:params.rentContractId}});
        } else {
          _me.setState({
            loading: false
          });
          Message.error(result.message, 10);
        }
      }
    })
  },

  handleSubmit(value) {

    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }

      console.log('收到表单值：', this.props.form.getFieldsValue());
      let  data = this.props.form.getFieldsValue();
      let rentCostList = this.getRentCostList(data);
      let contractExpenseList = this.getContractExpenseList(data);
      let dataList = {};
      dataList.rentCostList = rentCostList;
      dataList.contractExpenseList = contractExpenseList;

      dataList.rentContractId = data.rentContractId;
      dataList.payTime = Utils.formatDate(data.payTime);

      dataList.rentCancelDay = Utils.formatDate(data.rentCancelDay);
      dataList.refundMoney = data.refundMoney;
      dataList.rentAmount = this.state.collectRentAmount;
      dataList.remark = data.remark;
      dataList.operationType = value;
      dataList.startTime = data.startTime;
      dataList.periodCollectAmount = data.periodCollectAmount;
      dataList.periodReceivedAmount = data.periodReceivedAmount;
      

      // 表单提交
      this.rentRoomsCheckOuntOrder(dataList);
      console.log('dataList',dataList);

    });

  },

  render() {
    console.log('periodCollectAmount',this.state.periodCollectAmount);
    console.log('periodReceivedAmount',this.state.periodReceivedAmount);
    console.log('refundMoney',this.state.refundMoney);
    console.log('collectRentAmount',this.state.collectRentAmount);


    const { getFieldProps,getFieldValue } = this.props.form;


    const payTime = getFieldProps('payTime', {
      rules:[{
        required:true,
        type: 'date',
        message:'请输入缴费日期',
      }],
    })
    const rentCancelDay = getFieldProps('rentCancelDay', {
      rules:[{
        required:true,
        type: 'date',
        message:'请输入退租日期',
      }],
      onChange:this.getRentAmountRecei
    })

    const refundMoneyProps = getFieldProps(`refundMoney`, {
      rules:[
        {
          required: true ,
          message: '实退金额不能为空'
        },{
          validator: Utils.floatNum
        }
      ]
    });



    /* 仪表类列表 ***************start*/
    let arry = [];
    // 计费方式chargeType的关联数组
    let chargeTypeObj = {
      1:'正常收费',
      2:'阶梯收费',
      3:'面积收费'
    }
    let costList =  this.state.costList;
    if(costList.length != 0){
      costList.forEach((item) => {
        // 当为免收2、或为押金代收3时，实收金额变为0
        let receivedAmountCur = (item.status == '2'||item.costType == '3')? '0': item.collectAmount.toString();

        const receivedAmount = getFieldProps(`${item.id}receivedAmount`, {
          initialValue: receivedAmountCur,
          rules:[
            {
              required: true ,
              message: '实收金额不能为空'
            },{
              validator: Utils.floatNum
            }
          ],
          onChange:this.handleGetValue.bind(this,item.id)
        });

        // 操作  收取、免收
        const statusProps = getFieldProps(`${item.id}status`, {
          initialValue: item.status,
          onChange:this.handleSetStatus.bind(this,item.id)
        });

        // 收取方式
        const costTypeProps = getFieldProps(`${item.id}costType`, {
          initialValue: '1',
          onChange:this.handleCostType.bind(this,item.id)
        });

        let content = (
          <tr key={item.id}>
            <td>
              <Input type="hidden" {...getFieldProps(`${item.id}contractFeeItemId`, { initialValue: item.id })}/>
              <Input type="hidden" {...getFieldProps(`${item.id}costName`, { initialValue: item.costName })}/>
              <Input type="hidden" {...getFieldProps(`${item.id}collectAmount`, { initialValue: item.collectAmount })}/>
              <Input type="hidden" {...getFieldProps(`${item.id}depositBalance`, { initialValue: item.depositBalance })}/>
              <Input type="hidden" {...getFieldProps(`${item.id}lastScale`, { initialValue: item.lastScale })}/>
              <Input type="hidden" {...getFieldProps(`${item.id}currScale`, { initialValue: item.currScale })}/>
              <RadioGroup  {...statusProps}>
                <Radio value="1">收取</Radio>
                <Radio value="2">免收</Radio>
              </RadioGroup>
            </td>

            <td  style={{width:100}}>{item.costName}</td>
            <td  style={{width:100}}>{item.classify == 1?'固定': '仪表'}</td>
            <td  style={{width:100}}>{chargeTypeObj[item.chargeType]}</td>
            <td>
              {
                item.collectAmount > item.depositBalance ?
                (
                  <Select  {...costTypeProps}  style={{width:100}}>
                    <Option value="1">租客缴纳</Option>
                    <Option value="2">房东代收</Option>
                    <Option value="3" disabled>押金代扣</Option>
                  </Select>
                ):(
                  <Select  {...costTypeProps}  style={{width:100}}>
                    <Option value="1">租客缴纳</Option>
                    <Option value="2">房东代收</Option>
                    <Option value="3">押金代扣</Option>
                  </Select>
                )
              }
            </td>
            <td>
              {item.classify == 1?'- -':item.lastScale}
            </td>
            <td>
              {item.classify == 1?'- -':item.currScale}
            </td>
            <td>{item.price}</td>
            <td>{item.collectAmount}</td>
            <td>
              <FormItem label="" >
                {
                  item.status == '2' || item.costType == '3'?
                  <Input type="text" {...receivedAmount} disabled/>:
                  <Input type="text" {...receivedAmount} />
                }
              </FormItem>
            </td>
            <td>
              {item.depositBalance}
            </td>
          </tr>
        );
        arry.push(content);
      });
    }else {
      let content = (
        <tr >
          <td colSpan="11" >
            <Icon type="smile" />
            暂无数据
          </td>
        </tr>
      );
      arry.push(content);
    }
    /* 仪表类列表 ***************end*/

    /* 其他费用列表 ***************start*/


    getFieldProps('keys', {
      initialValue: [],
    });

    let typeIdArry = this.state.typeIdArry;

    let typeNameArry = this.state.typeNameArry;
    let costIdArry = this.state.costIdArry;
    let costNameArry = this.state.costNameArry;
    let keys = this.state.keys;

    let costNameOptionsArry = {};
    const otherFeeItem = keys.map((item)=> {
      const costTypeOptions = typeIdArry.map((typeItem)=> {
        if(costIdArry[typeItem]){
          const costNameOptions = costIdArry[typeItem].map((item1) => {
            return (
              <Option key={`costName${item1}`} value={item1}>{costNameArry[item1]}</Option>
            );
          });
          costNameOptionsArry[typeItem] = costNameOptions;

        }
        return (
          <Option key={`costType${typeItem}`} value={typeItem}>{typeNameArry[typeItem]}</Option>
        );
      });

      console.log('costNameOptionsArry',costNameOptionsArry);


      const chargeType = getFieldProps(`${item.key}chargeType`, {
        rules:[
          {
            required: true ,
            message: '请选择收费项类型'
          },
        ],
        onChange:this.handleCostTypeChange.bind(this,item.key)
      });

      let isValidate = true;
      isValidate = item.type == 4 ? false: true;

      const chargeName = getFieldProps(`${item.key}chargeName`, {
        rules:[
          {
            required: isValidate ,
            message: '请选择收费项名称'
          },
        ],
        onChange:this.handleCostNameChange.bind(this,item.key)
      });
      const otherItem = getFieldProps(`${item.key}otherItem`, {
        rules:[
          {
            required: true ,
            message: '其他收费项不能为空'
          },
        ]
      });

      const expenseAmount = getFieldProps(`${item.key}expenseAmount`, {
        rules:[
          {
            required: true ,
            message: '金额不能为空'
          },{
            validator: Utils.floatNum
          }
        ],
        onChange:this.handleGetValue.bind(this,item.key)
      });



      return (
        <Row key={item.key} gutter={24}>
          <Col sm={5}>
            <FormItem label="收费项类别" >
              <Select {...chargeType} placeholder="请选择" notFoundContent="暂无" style={{width:100}}>
                {costTypeOptions}
              </Select>
            </FormItem>
          </Col>

          <Col sm={5}>
            {
              item.type == 4 ?
                <FormItem label="其他收费项" >
                  <Input {...otherItem}  style={{width:100}}/>
                </FormItem>
                :
                <FormItem label="收费项名称" >
                  <Select {...chargeName} placeholder="请选择" notFoundContent="暂无" style={{width:100}}>
                    {costNameOptionsArry[item.type]}
                  </Select>
                </FormItem>
            }

          </Col>
          <Col sm={7}>
            <FormItem label="金额" >
              <Input type="text" {...expenseAmount}  style={{width:100}}/>元
            </FormItem>
          </Col>
          <Col sm={2}>
            <FormItem >
              <span className="addfree-btn" onClick={() =>this.handleRemoveOtherFee(item.key)}>
                <Icon title="删除" type="cross" />
              </span>
            </FormItem>
          </Col>
        </Row>
      );
    });


    /* 其他费用列表 ***************end*/

    // 房间名称
    let roomNames = this.state.roomNames;
    let roomNamesArry = [];
    let length = roomNames.length;
    roomNames.forEach((item, index) => {
      console.log(index);

      let content = length == index +1 ?
        (
          <span>{item}</span>
        ):(
          <span>{item}<span className="ant-divider" /></span>
        );
      roomNamesArry.push(content);
    });

    return (
      <Form inline  form={this.props.form} className="form-group inner-content">
        <Row gutter={24}>
          <Col sm={8}>
            <Input type="hidden" {...getFieldProps('normalFeekeys', { initialValue: this.state.normalFeekeys })} />
            <Input type="hidden" {...getFieldProps(`rentContractId`, { initialValue: this.props.location.state.rentContractId })}/>
            <Input type="hidden" {...getFieldProps(`periodCollectAmount`, { initialValue: this.state.periodCollectAmount })}/>
            <Input type="hidden" {...getFieldProps(`periodReceivedAmount`, { initialValue: this.state.periodReceivedAmount })} />
            <Input type="hidden" {...getFieldProps(`rentAmount`, { initialValue: this.state.rentAmount })} />

            <Input type="hidden" {...getFieldProps(`startTime`, { initialValue: this.state.startTime })} />


            <FormItem label="房间名称" >
              <p className="ant-form-text">{roomNamesArry}</p>
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="租客姓名" >
              <p className="ant-form-text">{this.props.location.state.renterName}</p>
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="房租押金" >
              <p className="ant-form-text">￥{this.props.location.state.deposit}</p>
            </FormItem>
          </Col>

        </Row>
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem label="收款日期范围" >
              <p className="ant-form-text">{this.state.startTime}至{this.state.endTime}</p>
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="已收房租" >
              <p className="ant-form-text">￥{this.state.rentAmount}</p>
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="应收房租" >
              <p className="ant-form-text">￥{this.state.collectRentAmount}</p>
            </FormItem>
          </Col>


        </Row>
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem label="退租日期" >
              <DatePicker {...rentCancelDay} />
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="缴费日期" >
              <DatePicker {...payTime} />
            </FormItem>
          </Col>
        </Row>

        <table className="normal-table">
          <thead className="ant-table-thead">
          <tr>
            <th>操作</th>

            <th style={{width:100}}>收费项名称</th>

            <th>计费分类</th>

            <th>计费方式</th>

            <th>收取方式</th>

            <th>上次刻度</th>

            <th>本次刻度</th>

            <th>单价 / 元</th>

            <th>应收金额 / 元</th>

            <th>实收金额 / 元</th>

            <th>押金余额 / 元</th>
          </tr>
          </thead>
          <tbody className="ant-table-tbody">

          {arry}

          </tbody>
        </table>
        {
          //<Row gutter={24}>
          //  <Col sm={8}>
          //    <FormItem style={{ marginTop: 24 }}>
          //      <Button type="primary" onClick={this.handleAddOtherFee}>追加其他费用</Button>
          //    </FormItem>
          //  </Col>
          //</Row>
        }

        {getFieldValue('keys').length ? otherFeeItem : null}
        {
          //<Row gutter={24}>
          //  <Col sm={20}>
          //    <p>实退金额 = ￥ {this.state.rentAmount} +
          //      ￥ {this.props.location.state.deposit} -
          //      ￥ {this.state.collectRentAmount} +
          //      ￥ {this.state.depositAmount} -
          //      ￥ {this.state.receivedCostAmount}
          //      = ￥ {this.state.refundMoney}
          //    </p>
          //    <p>温馨提示：<br/>
          //      实退金额 = 已收房租 + 房租押金 - 应收房租 + 押金余额 - 实收收费项</p>
          //  </Col>
          //
          //
          //</Row>
        }
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem label="实退总金额" style={{ marginTop: 24 }}>
              <Input type="text" {...refundMoneyProps}  style={{width:100}}/>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col sm={16}>
            <FormItem label="备注" style={{marginLeft : -60}}>
              <Input type="textarea" {...getFieldProps('remark',{initialValue : ''})} style={{width : 464}}/>
            </FormItem>
          </Col>
        </Row>
        <FormItem style={{ marginTop: 24 }}>
          <Button style={{ marginRight: 20 }} type="primary" loading={this.state.loading} onClick={this.handleSubmit.bind(this, '1')}>提交</Button>
          <Button type="ghost" loading={this.state.loading} onClick={this.handleSubmit.bind(this, '2')}>发送账单给租客</Button>
        </FormItem>
      </Form>
    );
  },
});

Demo = Form.create()(Demo);
export default Demo